<!--  -->
<template>
<div class='login'>
    <div class="login_box">
        <el-form ref="form1" :rules="rules" :model="form"  >
            <el-form-item prop="username">
              <el-input prefix-icon="el-icon-edit"  v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item  prop="userpwd">
              <el-input prefix-icon="el-icon-edit" v-model="form.userpwd"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit('form1')">登录</el-button>
              <el-button  @click="resetForm('form1')">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</template>

<script>
export default {
 
components: {},
data() {
return {
    form:{
        username:'',
        userpwd:""
    },
    rules: {
        username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            
          ],
        userpwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        
        ]
        }
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    onSubmit(formName){
        this.$refs[formName].validate(async valid => {
          if (valid) {
              var {data:res} =await this.$http({
                url:"/api/login",
                method:"post",
                data:this.form
              })
            localStorage.setItem("mytoken",res.data)
            this.$router.push({path:"/home"})
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
        console.log(this.$refs[formName])
      },
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
}
</script>
<style  scoped>
  .login{
    background-image: url("../assets/images/bag.jpg");
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
  }
    .login_box{
        text-align: center;
        padding: 50px 20px 0px 20px;
        width: 400px;
        height: 300px;
        background: #f7f7f7;
        position: absolute;
        top: 150px;;
        left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;
    }
</style>